<template>
	<!-- 我的店铺 -->
	<view class="personalstores_wp">
		<view class="p_bg"></view>
		<view class="p_body">
			<view class="p_shop"> 
				<view class="p_logo">
					<image :src="info.logo" mode="" ></image>
					<button class="p_btn p_look" size="mini" @click="$navTo('/pages/shoplist/shopgoods?id='+info.uid)">查看门店</button>
					<button class="p_btn p_images" size="mini" @click="$navTo('/pages/business/gallery?id='+info.uid)">图库管理</button>
				</view>
				<view class="p_info">
					<view class="flex_center">
						<view class="p_info_dis_t">本店让利</view>
						<view class="p_info_dis">{{info.discount}}%</view>
					</view>
					<view class="flex_center">
						<view class="p_info_dis_t">最高补贴商家</view>
						<view class="p_info_dis">{{info.feerate}}%</view>
					</view>
					<view class="flex_center">
						<view class="p_info_dis_t">最高补贴消费者</view>
						<view class="p_info_dis">{{info.perk}}%</view>
					</view>
					<!-- <view style="color:#8405dc;" v-if="info.paymode==0">预存充值店</view> -->
					<view class="p_s_title">{{info.supname}}</view>
					<view class="p_s_title">店铺ID: {{info.uid}}</view>
					<!--<button type="mini" size="mini" @click="copy(info.supname)">复制</button> -->
				</view>
				<!-- <view class="p_set" @click="$navTo('../business/template')">店铺设置</view> -->
			</view>
			<view class="p_tips" v-if="groupInfo.id">
				<view>是否加入{{groupInfo.name}}</view>
				<view class="p_btns">
					<button size="mini" type="warn" @click="joinGroup(-1)">拒绝</button>
					<button size="mini" @click="joinGroup(1)">加入</button>
				</view>
			</view>
			<!-- <view class="p_tips">
				<view>提高门店形象，快速商家获客引流。</view>
				<button class="btn" size="mini" @click="$navTo('/pages/other/college')">去学习</button>
			</view> -->
			<!-- <view class="p_tips" v-if="!isempower">
				<view>授权推荐人，修改店铺公告、团购商品等</view>
				<button class="btn" size="mini" v-if="info.empower==0" @click="empower(1)">去授权</button>
				<button type="warn" size="mini" v-if="info.empower==1" @click="empower(0)">取消授权</button>
			</view> -->
			<view class="cate_list">
				<view class="c_item" :class="{'c_active':isCate==1}" @click="changeCate(1)">店铺设置</view>
				<view class="c_item" :class="{'c_active':isCate==2}" @click="changeCate(2)">商品管理</view>
				<view class="c_item" :class="{'c_active':isCate==3}" @click="changeCate(3)">其它设置</view>
			</view>
			<view class="p_list" v-if="isCate==1">
				<!-- <view class="p_item p_big">
					<view class="p_title p_big">店铺设置</view>
				</view> -->
				<!-- @click="$navTo('../business/merch?uid='+info.uid)" -->
				<view class="p_item" @click="Popup" v-if="!isempower">
					<image class="logo" src="/static/business/set/1.png"></image>
					<view class="p_title">基本信息<text style="color: red;width: 100%;text-align: center;">(需审核)</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view v-if="info.paymode==1&&!isempower" class="p_item" @click="$navTo('/pages/business/accountdis?uid='+info.uid)">
					<image class="logo" src="/static/business/set/12.png"></image>
					<view class="p_title">店铺让利设置<br><text class="gray">3秒设置全场让利，轻松引流客户到店！</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="p_item" @click="$navTo('/pages/business/notice?uid='+info.uid)">
					<image class="logo" src="/static/business/set/2.png"></image>
					<view class="p_title">滚动字幕、店铺图片、宣传视频<br><text class="gray">提高店铺形象，有效提高客户到店率</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="p_item" @click="$navTo('/pages/groupmenu/addlabel?uid='+info.uid)">
					<image class="logo" src="/static/business/set/3.png"></image>
					<view class="p_title">提示标签<br><text class="gray">展示店铺特色 或 提示不参与折扣的产品</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="p_item" v-if="!isempower" @click="$navTo('/pages/groupmenu/shoppersonnel?uid='+info.uid)">
					<image class="logo" src="/static/business/set/7.png"></image>
					<view class="p_title">店员管理<br><text class="gray">可授权多个店员核销</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<!-- <view class="p_item" v-if="!isempower" @click="$navTo('/pages/business/myset?uid='+info.uid)">
					<image class="logo" src="/static/business/set/9.png"></image>
					<view class="p_title">自动核销设置<br><text class="gray">顾客到店买单的核销方式(与团购商品无关)</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view> -->
			</view>
			<view class="p_list" v-if="isCate==2">
				<!-- <view class="p_item p_big">
					<view class="p_title p_big">商品管理</view>
				</view> -->
				<!-- <view class="p_item" @click="$navTo('/pages/business/shopclass?uid='+info.uid)">
					<image class="logo" src="/static/business/set/4.png"></image>
					<view class="p_title">商品分类<br><text class="gray">添加商品前，先设置商品分类信息</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view> -->
				<!-- <view class="p_item" @click="$navTo('/pages/business/shoplist?uid='+info.uid)">
					<image class="logo" src="/static/business/set/5.png"></image>
					<view class="p_title">电子菜单(仅展示)<br><text class="gray">展示商品或服务，顾客可在线查看，不可购买</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view> -->
				<view class="p_item" @click="$navTo('/pages/business/shoplistw?uid='+info.uid)">
					<image class="logo" src="/static/business/set/6.png"></image>
					<view class="p_title">团购商品<br><text class="gray">用户线上购买后，到店消费</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<!-- <view class="p_item" @click="$navTo('/pages/business/shoponcecardList?uid='+info.uid)">
					<image class="logo" src="/static/business/set/10.png"></image>
					<view class="p_title">次卡商品<br><text class="gray">用户线上购买后，可到店多次使用</text></view>
					<text class="cell-more yticon icon-you"></text>
				</view> -->
			</view>
			<view class="p_list" v-if="!isempower&&isCate==3">
				<!-- <view class="p_item p_big">
					<view class="p_title">其它设置</view>
				</view> -->
				<view class="p_item" @click="$navTo('/pages/business/equipment?uid='+info.uid)">
					<image class="logo" src="/static/business/set/8.png"></image>
					<view class="p_title">音响绑定</view>
					<text class="cell-more yticon icon-you"></text>
				</view>
<!-- 				<view class="p_item" @click="$navTo('/pages/groupmenu/joingroup')">
					<image class="logo" src="/static/business/set/1.png"></image>
					<view class="p_title">连锁店管理</view>
					<text class="cell-more yticon icon-you"></text>
				</view> -->
				<view v-if="isEva==3" class="p_item" @click="$navTo('/pages/business/evaluationControl?uid='+info.uid)">
					<image class="logo" src="/static/business/set/11.png"></image>
					<view class="p_title">评价管理</view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="p_item" @click="$navTo('/pages/business/changeStoreManager?uid='+info.uid)">
					<image class="logo" src="/static/business/set/7.png"></image>
					<view class="p_title">变更店长</view>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<!-- <view class="p_item">
					<image class="logo" src="/static/business/set/4.png"></image>
					<view class="p_title">授权管理<br><text class="gray">授权推荐人，修改店铺公告、团购商品等</text></view>
					<button type="default" size="mini" v-if="info.empower==0" @click="empower(1)">授权</button>
					<button type="warn" size="mini" v-if="info.empower==1" @click="empower(0)">取消授权</button>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				info: {},
				orderinfo: {},
				times: 0,
				paymode: '',
				uid: '',
				isEva: uni.getStorageSync('levelname') || 0,
				isempower: 0,
				isCate: 1,
				groupInfo: []
			}
		},
		onLoad(option) {
			this.info.uid = option.uid;
			this.getInfo();
			this.isempower = option.isempower;
			this.getGroup()
		},
		onShow(){
			this.getInfo();
		},
		methods: {
			getGroup(){
				this.$axios('info/groupList','POST','supplier').then(res=>{
					if(res.data.code == 200){
						if(res.data.data.length>0){
							res.data.data.forEach(item=>{
								if(item.status==0){
									this.groupInfo = item;
								}
							})
						}
					}
				})
			},
			joinGroup(status){
				this.$axios('info/groupCheck','POST','supplier',{
					id: this.groupInfo.id,
					status
				}).then(res=>{
					if(res.data.code == 200){
						this.groupInfo = [];
						this.$api.msg(res.data.data);
					}
				})
			},
			changeCate(id){
				if(id == this.isCate) return;
				this.isCate = id;
			},
			copy(v){
				uni.setClipboardData({
					data: v,
					success: function () {
					}
				});
			},
			Popup() {  // 临时提醒
				uni.showModal({
					title: '特别提示 ',
					content: '如[入驻行业][区县][门头照][营业执照][身份证]发生修改，需要人工审核，审核期间需临时关店，请谨慎选择是否继续？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true 显示
					confirmColor: '#f55850', 
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) { 
										//点击确定之后执行的代码
						uni.navigateTo({
						    url:"../business/merch?uid="+ this.info.uid
						})

					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
			},
			empower(val){
				if(val==1){
					uni.showModal({
						title: '授权',
						content: '推荐人可进行修改店铺公告、轮播图、添加店铺团购商品等操作，确认是否授权？',
						success:  res=> {
							if (res.confirm) {
								this.empowerData(val);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showModal({
						title: '授权',
						content: '是否确定取消授权',
						success:  res=> {
							if (res.confirm) {
								this.empowerData(val);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			empowerData(status){
				this.$axios('info/empower','POST','supplier',{
					status
				}).then(res=>{
					if(res.data.code == 200){
						this.$api.msg(res.data.data)
						this.info.empower = status;
					}
				})
			},
			getInfo() {
				this.$axios('info/main', 'POST', 'supplier', {
					uid: this.info.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						// this.info.discount = Number(this.info.discount).toFixed(0);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		color: $font-color-dark;
		padding-bottom: 130upx;
	}

	.p_bg {
		background: $base-color;
		position: absolute;
		top: 0;
		width: 100%;
		height: 180upx;
	}

	.p_body {
		padding: 30upx 20upx;
		position: relative;
		z-index: 10;
	}

	.p_shop {
		background: #fff;
		border-radius: 20upx;
		text-align: center;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		overflow: hidden;
		font-size: 32rpx;
		box-shadow: 0rpx -1rpx 13rpx 0rpx #bababa;
		.p_logo{
			position: relative;
			image {
				height: 360rpx;
				width: 360rpx;
				display: block;
			}
			.p_btn{
				position: absolute;
				bottom: 20rpx;
				opacity: .9;
				padding: 0 30rpx;
			}
			.p_look{
				// left: 29%;
				left: 10rpx;
				color: $bg-color;
			}
			.p_images{
				background: $bg-color;
				right: 10rpx;
				color: #fff;
			}
		}
		.p_info{
			flex:1;
			height: 360rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			// background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
			background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
			button{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
			.flex_center{
				view{
					padding: 8rpx;
					font-size: 28rpx;
				}
			}
			.p_info_dis_t{
				border-top-left-radius: 8rpx;
				border-bottom-left-radius: 8rpx;
				background: #fff;
				color: #B92DF1;
			}
			.p_info_dis{
				color: #fff;
				border-top-right-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
				background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
				padding: 8rpx 12rpx!important;
			}
		}
	}
	.p_tips{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 18rpx;
		.p_btns{
			button{
				width: 100rpx;
			}
			button:last-child{
				margin-left: 10rpx;
				background: $bg-color;
			}
		}
		.btn{
			background: $bg-color;
			&::after{
				border: none;
			}
		}
		button{
			margin: 0;
			width: 150rpx;
			padding: 0;
			color: #fff;
			white-space: nowrap;
		}
	}
	.p_s_title {
		font-weight: bold;
		font-size: 32rpx;
	}

	.p_set {
		color: #0062CC;
		position: absolute;
		top: 30upx;
		right: 40upx;
	}
	.cate_list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 18rpx;
		overflow: hidden;
		.c_item{
			width: 50%;
			line-height: 3;
			text-align: center;
			background: #eaeaea;
		}
		.c_active{
			background: #fff;
		}
	}
	.p_list {
		margin-bottom: 18rpx;
		border-radius: 20rpx;
		overflow: hidden;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
	}

	.p_item {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		height: 120rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f1efef;
		.p_title{
			flex: 1;
			.gray{
				color: #999;
				font-size: 24rpx;
			}
		}
		.logo{
			width: 38rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}
		.cell-more {
		    font-size: 32rpx;
		    color: #909399;
		    margin-left: 10rpx;
		}
		button{
			margin: 0;
			width: 150rpx;
			padding: 0;
			white-space: nowrap;
		}
	}
	.p_big{
		height: auto;
		border: none;
		padding-top: 16rpx;
		.p_title{
			color: #333;
			font-weight: bold;
			font-size: 32rpx;
		}
	}

	.p_item_num {
		text-align: center;
		width: 100%;
		font-size: 40upx;
	}
</style>